<template>
  <!-- 表单属性 -->
  <el-form size="small" label-width="90px">
    <el-form-item label="表单名">
      <el-input v-model="formData.formRef" placeholder="请输入表单名（ref）" />
    </el-form-item>
    <el-form-item label="表单模型">
      <el-input v-model="formData.formModel" placeholder="请输入数据模型" />
    </el-form-item>
    <el-form-item label="校验模型">
      <el-input v-model="formData.formRules" placeholder="请输入校验模型" />
    </el-form-item>
    <el-form-item label="表单尺寸">
      <el-radio-group v-model="formData.size">
        <el-radio-button label="medium">中等</el-radio-button>
        <el-radio-button label="small">较小</el-radio-button>
        <el-radio-button label="mini">迷你</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="标签对齐">
      <el-radio-group v-model="formData.labelPosition">
        <el-radio-button label="left">左对齐</el-radio-button>
        <el-radio-button label="right">右对齐</el-radio-button>
        <el-radio-button label="top">顶部对齐</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="标签宽度">
      <el-input
        v-model.number="formData.labelWidth"
        type="number"
        placeholder="请输入标签宽度"
      />
    </el-form-item>
    <el-form-item label="栅格间隔">
      <el-input-number
        v-model="formData.gutter"
        :min="0"
        placeholder="栅格间隔"
      />
    </el-form-item>
    <el-form-item label="禁用表单">
      <el-switch v-model="formData.disabled" />
    </el-form-item>
    <!-- <el-form-item label="表单按钮">
      <el-switch v-model="formData.formBtns" />
    </el-form-item> -->
    <el-form-item label="显示未选中组件边框">
      <el-switch v-model="formData.unFocusedComponentBorder" />
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    // 表单属性
    formConf: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    // 当前选中的表单组件
    formData: {
      get() {
        let that = this;
        return new Proxy(that.formConf, {
          get(obj, key) {
            return key in obj ? obj[key] : undefined;
          },
          set(obj, key, val) {
            that.$emit("update:formConf", {
              ...obj,
              [key]: val,
            });
            return true;
          },
        });
      },
      set(val) {
        this.$emit("update:formConf", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped></style>
